<div id="admindiv">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel">{:strtoupper(lang('add_/change_employee_profile'))}</h4>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#edit_tab_base" data-toggle="tab">{:strtoupper(lang('basic_information'))}</a>
                    </li>
                    <li>
                        <a href="#edit_tab_person" data-toggle="tab">{:strtoupper(lang('personal_information'))}</a>
                    </li>
                    <li>
                        <a href="#edit_tab_linkmeth" data-toggle="tab">联系方式</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="tab-content formbox">
            <!--基础信息-->
            <div role="tabpanel" class="tab-pane active" id="edit_tab_base">
                <div class="row clearfix">
                    <div class="col-md-12 column">
                        <table class="table table-striped table-hover ntTable">
                            <tbody>
                            <tr>
                                <td class="col-md-2">{:strtoupper(lang('country'))}<span class="required"></span></td>
                                <td>
                                    <select class="form-control col-md-2" v-model="data.country_id"
                                            @change="selchangefun">
                                        <option value="" selected>{:lang('please_select')}</option>
                                        <option :value="index" v-for="(item,index) in countrys">
                                            {{item}}
                                        </option>
                                    </select>
                                </td>
                                <td>{:strtoupper(lang('default_language'))}</td>
                                <td colspan="3">
                                    <select class="form-control" v-model="data.language_id">
                                        <option value="" selected>{:lang('please_select')}</option>
                                        <option :value="item.id" v-for="(item,index) in langs">
                                            {{item.name}}
                                        </option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>{:strtoupper(lang('account'))}<span class="required"></span></td>
                                <td>
                                    <input type="text" class="form-control" placeholder="{:lang('login_account')}"
                                           v-model="data.name">
                                </td>
                                <td>{:strtoupper(lang('nickname'))}<span class="required"></span></td>
                                <td colspan="3">
                                    <input type="text" class="form-control" placeholder="{:lang('nickname')}"
                                           v-model="data.nickname">
                                </td>
                            </tr>
                            <tr>
                                <td>{:strtoupper(lang('department'))}<span class="required"></span></td>
                                <td>
                                    <select class="form-control" v-model="data.department_id">
                                        <option value="" selected>{:lang('please_select')}</option>
                                        <option :value="item.id" v-for="(item,index) in departments">
                                            <template v-for="(item,index) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>{{item.langname}}
                                        </option>
                                    </select>
                                </td>
                                <td>{:strtoupper(lang('job'))}<span class="required"></span></td>
                                <td>
                                    <select class="form-control" v-model="data.position_id">
                                        <option value="" selected>{:lang('please_select')}</option>
                                        <option :value="item.id" v-for="(item,index) in positions">
                                            <template v-for="(item,index) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>  {{item.langname}}
                                        </option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>{:strtoupper(lang('entry_time'))}<span class="required"></span></td>
                                <td>
                                    <div class="input-group date form_datetime work_day" data-link-field="workdate">
                                        <input class="form-control text-center" ref="work_day" v-model="data.work_day"
                                               type="text">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"
                                                                              style="margin:0"></span></span>
                                    </div>
                                    <input type="hidden" id="workdate"/>
                                </td>
                                {if ($str eq 'personneledit')}
                                <!--离职时间编辑显示-->
                                <td class="col-md-2">{:strtoupper(lang('resignation_date'))}</td>
                                <td>
                                    <div class="input-group date form_datetime leave_day"
                                         data-link-field="leavedate">
                                        <input class="form-control" type="text" ref="leave_day"
                                               v-model="data.leave_day">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"
                                                                              style="margin:0"></span></span>
                                    </div>
                                    <input type="hidden" id="leavedate"/>
                                </td>
                                {/if}
                            </tr>
                            <tr>
                                <td>{:strtoupper(lang('basic_salary'))}<span class="required"></span></td>
                                <td>
                                    <input type="number" class="form-control"
                                           placeholder="{:lang('basic_salary')}" v-model="data.wage"
                                           style="text-align:right">
                                </td>
                                <td>{:strtoupper(lang('status'))}<span class="required"></span></td>
                                <td>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" value="1" v-model="data.status">{:lang('on_the_job')}
                                    </label>
                                    <label class="radio-inline">
                                        {if ($str neq 'personneladd')}
                                        <!--离职添加的时候不显示-->
                                        <input type="radio" name="status" value="2" v-model="data.status">{:lang('departure')}
                                        {/if}
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" value="3" v-model="data.status">{:lang('locking')}
                                    </label>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!--个人资料-->
            <div role="tabpanel" class="tab-pane" id="edit_tab_person">
                <div class="row clearfix">
                    <div class="col-md-12 column">
                        <table class="table table-striped table-hover ntTable">
                            <tbody>
                            <tr>
                                <td>{:strtoupper(lang('name'))}<span class="required"></span></td>
                                <td>
                                    <div>
                                        <input type="text" class="form-control" name="firstname"
                                               v-model="data.firstname"
                                               placeholder="姓">
                                    </div>
                                </td>
                                <td></td>
                                <td>
                                    <div>
                                        <input type="text" class="form-control" name="lastname" v-model="data.lastname"
                                               placeholder="名">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>{:strtoupper(lang('brithday'))}<span class="required"></span></td>
                                <td>
                                    <div class="input-group date form_datetime birthday" data-link-field="birthday">
                                        <input class="form-control" type="text" ref="birthday"
                                               v-model="data.birthday">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"
                                                                              style="margin:0"></span></span>
                                    </div>
                                    <input type="hidden" id="birthday"/>
                                </td>
                                <td>{:strtoupper(lang('education'))}</td>
                                <td>
                                    <select class="form-control" v-model="data.education" lay-verify=""
                                            lay-search>
                                        <option value="" selected>{:lang('please_select')}</option>
                                        <option :value="index" v-for="(item,index) in educations">
                                            {{item}}
                                        </option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>{:strtoupper(lang('gender'))}</td>
                                <td>
                                    <label class="radio-inline" v-for="(item,index) in sexs">
                                        <input type="radio" name="sex" :value="index" v-model="data.sex">{{item}}
                                    </label>
                                </td>

                                <td>{:strtoupper(lang('married_yes/no'))}<span class="required"></span></td>
                                <td>
                                    <label class="radio-inline" v-for="(item,index) in marrys">
                                        <input type="radio" name="marry" :value="index" v-model="data.marry">{{item}}
                                    </label>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <!--联系方式-->
            <div role="tabpanel" class="tab-pane" id="edit_tab_linkmeth">
                <div class="row clearfix">
                    <div class="col-md-12 column">
                        <table class="table table-striped table-hover ntTable">
                            <tbody>
                            <tr>
                                <td>{:strtoupper(lang('contact_information'))}</td>
                                <td colspan="3">
                                    <div class="input-group" style="width:100%">
                                        <div class="input-group-btn" style="width: 150px;">
                                            <select id="sellinkfun" class="form-control" v-model="sellinkfun">
                                                <option value="" selected>{:lang('please_select')}</option>
                                                <option :value="item.id" v-for="(item,index) in methods">
                                                    {{item.content}}
                                                </option>
                                            </select>
                                        </div>
                                        <input type="text" class="form-control" v-model="linkval">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-primary" @click="addlink">
                                                <span class="glyphicon glyphicon-plus"> </span>
                                                {:strtoupper(lang('add'))}
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped table-hover ntTable">
                            <thead>
                            <tr>
                                <th>{:strtoupper(lang('type'))}</th>
                                <th>{:strtoupper(lang('content'))}</th>
                                <th>{:strtoupper(lang('operate'))}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in data.linkarr" :key="data.linkarr.id">
                                <td>{{item.linkname}}</td>
                                <td>{{item.content}}</td>
                                <td class="text-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" @click="editfun(index)"><span
                                                class="glyphicon glyphicon-pencil"></span>{:strtoupper(lang('edit'))}
                                        </button>
                                        <button type="button" class="btn btn-default" @click="delitem(index)"><span
                                                class="glyphicon glyphicon-trash"></span>{:strtoupper(lang('delete'))}
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr style="text-align: center;" v-if="data.linkarr.length==0">
                                <td colspan="3" class="no_date">{:strtoupper(lang('no_data'))}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <input type="hidden" id="act" name="act" value="{$str}">
            <input type="hidden" name="id" id="id" value="{$id|default=''}">
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>{:strtoupper(lang('cancel'))}
        </button>
        <button :disabled="isdisadble" @click="savebtn" type="button" class="btn btn-primary"
                style="padding-left:24px;padding-right:24px"><span
                class="glyphicon glyphicon-floppy-disk"></span>{:strtoupper(lang('save'))}
        </button>
    </div>
</div>
<script>
    new Vue({
        el: '#admindiv',
        data: () => ({
            isdisadble: false,
            countrys: [],//国家
            langs: [],//语言
            positions: [],//职位
            departments: [],//部门
            educations: [],//学历
            sexs: [],//性别
            marrys: [],//婚姻
            methods: [],//联系名称
            sellinkfun: '',//联系值
            linkval: '',//填写的值
            data: {
                linkarr: [],//联系方式
                country_id: 0,
                language_id: '',
                name: '',
                nickname: '',
                department_id: '',
                position_id: '',
                work_day: '',
                leave_day: '',
                wage: '',
                status: '1',
                firstname: '',
                lastname: '',
                birthday: '',
                education: '',
                sex: '1',
                lang: $('#lang').text(),
                marry: '1',
                act: $('#act').val(),
                id: $('#id').val(),
            },
            iseditlianxi: 'a',
            isex: '1',
            lianxi_ids: [],
        }),
        methods: {
            //保存数据
            savebtn(){
                this.isdisadble=true;
//                $('.modal-body .alert').hide()
                $.ajax({
                    url: '/admin/organization/' + $('#act').val(),
                    data: {
                        data: this.data
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert', data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + data.msg + '<br>')
                        } else {
                            change_mes_type('#headeralert', data.status)
                            $('#headeralert').show()
                            $('#headeralert p').html(data.msg + '<br>')
                            $('#worker_editModal').modal('toggle')
                        }
                        this.isdisadble=false;
                    }
                })
            },
            //进入的数据
            getalldata(){
                $('.loding').show();
                $.ajax({
                    url: '/admin/organization/' + $('#act').val(),
                    data: {
                        id: $('#id').val(),
                        getadmin: ''
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        this.countrys = data.countrys,
                            this.langs = data.lang,
                            this.educations = data.education,
                            this.marrys = data.marry
                        this.methods = data.methods
                        this.data.linkarr = data.adminmethods
                        this.sexs = data.sex
                        if (data.info) {
                            this.data.country_id = data.info.country_id;
                            this.data.language_id = data.info.language_id;
                            this.data.name = data.info.name;
                            this.data.nickname = data.info.nickname;
                            this.data.department_id = data.info.department_id;
                            this.data.position_id = data.info.position_id;
                            this.data.work_day = data.info.work_day==0?'':data.info.work_day;
                            this.data.leave_day = data.info.leave_day==0?'':data.info.leave_day;
                            this.data.wage = data.info.wage;
                            this.data.status = data.info.status;
                            this.data.firstname = data.info.firstname;
                            this.data.lastname = data.info.lastname;
                            this.data.birthday = data.info.birthday==0?'':data.info.birthday;
                            this.data.education = data.info.education;
                            this.data.sex = data.info.sex;
                            this.data.marry = data.info.marry;
                        } else {
                            this.data.birthday = data.birthday;
                        }
                        //对应的国家和部门
                        this.getpossdefr(this.data.country_id, 'department');
                        this.getpossdefr(this.data.country_id, 'position');
                        $('.loding').hide();
                    }
                })
            },
            getpossdefr(coun_id, tabel){
                $.ajax({
                    url: '/admin/api/postionfrmaes',
                    type: 'post',
                    data: {
                        table: tabel,
                        lang: $('#lang').text(),
                        country_id: coun_id
                    },
                    dataType: 'json',
                    success: (res) => {
                        if (tabel == 'department') {
                            //部门的渲染
                            this.departments = res;
                        } else {
                            //职位渲染
                            this.positions = res;
                        }
                    }
                });
            },
            addlink(){
                //联系方式和联系的值
                if (this.linkval && this.sellinkfun) {
                    //判断这个是编辑的添加还是直接添加的（编辑添加）
                    if (this.iseditlianxi > 0 && this.iseditlianxi != 'a') {
                        //编辑之前的联系方式id
                        let lanxieditid = this.data.linkarr[this.iseditlianxi]['coattr_id'];
                        if (lanxieditid != this.sellinkfun) {
                            //编辑的联系方式改变了，就需要判断现在重新添加的类型是否存在语列表页面
                            $.each(this.data.linkarr, (key, value) => {
                                if (value.coattr_id == this.sellinkfun) {
                                    change_mes_type('.modal-body .alert', 3)
                                    $('.modal-body .alert').show()
                                    $('.modal-body .alert p').html('*编辑的联系方式已经存在' + '<br>');
                                    this.isex = '2';
                                }
                            });
                            if (this.isex == '2') {
                                this.isex = '1';
                                return false;
                            }
                            if (this.isex == '1') {
                                //编辑时写的是其他的联系方式
                                this.data.linkarr[this.iseditlianxi]['linkname'] = $("#sellinkfun").find("option:selected").text();
                                this.data.linkarr[this.iseditlianxi]['coattr_id'] = this.sellinkfun;
                            }
                        }
                        //无论联系方式是否改变，更新内容
                        this.data.linkarr[this.iseditlianxi]['content'] = this.linkval;
                    } else {
                        //获取添加的时候，下面含有的所有最新的联系方式
                        this.listlanxitwo();
                        let isexit = this.lianxi_ids.findIndex(item => item == this.sellinkfun);
                        if (isexit >= 0) {
                            //添加时，添加的联系方式类型，存在列表,覆盖操作
                            $.each(this.data.linkarr, (key, value) => {
                                if (value.coattr_id == this.sellinkfun) {
                                    this.data.linkarr[key]['content'] = this.linkval;
                                }
                            });
                        } else {
                            //添加
                            this.data.linkarr.push({
                                id: '',//联系方式id
                                linkname: $("#sellinkfun").find("option:selected").text(),
                                coattr_id: this.sellinkfun,//属性id
                                content: this.linkval,//联系方式
                            })
                        }
                    }
                    this.isex = '1';
                    this.iseditlianxi = 'a'
                    this.linkval = '';
                    this.sellinkfun = '';
                } else {
                    change_mes_type('.modal-body .alert', 2)
                    $('.modal-body .alert').show()
                    $('.modal-body .alert p').html('*数据不完整' + '<br>')
                }
            },
            editfun(index){
                this.linkval = this.data.linkarr[index].content
                if (this.data.linkarr[index].linkname) {
                    this.sellinkfun = this.data.linkarr[index].coattr_id
                } else {
                    this.sellinkfun = '';
                }
                this.iseditlianxi = index;
                this.isex = '1';
            },
            delitem(index){
                this.data.linkarr.splice(index, 1);
                this.iseditlianxi = 'a';
                this.isex = '1';
            },
            listlanxitwo(){
                this.lianxi_ids = [];
                this.data.linkarr.forEach((element, index) => {
                    this.lianxi_ids.push(element.coattr_id)
                })
            },
            //改变国家获取对应的职位和部门
            selchangefun(){
                this.getpossdefr(this.data.country_id, 'department');//部门
                this.getpossdefr(this.data.country_id, 'position');//职位
            }
        },
        mounted() {
            this.getalldata();
            $('.work_day').on('changeDate', (e) => {
                this.data.work_day = this.$refs.work_day.value;//工作日期
            });
            $('.leave_day').on('changeDate', (e) => {
                this.data.leave_day = this.$refs.leave_day.value;//离职日期
            });
            $('.birthday').on('changeDate', (e) => {
                this.data.birthday = this.$refs.birthday.value;//出生年月
            });
        }
    })
</script>
<script language="javascript">
    $(document).ready(function () {
        var lang = $('#lang').text();
        var language = '';
        if (lang == 'pt') {
            language = 'pt-BR';
        } else if (lang == 'en') {
            language = 'en';
        } else {
            language = 'zh-CN';
        }
        // datatimepicker 设置
        $('.form_datetime').datetimepicker({
            language: language, // en ,zh-CN, pt-BR
            format: 'yyyy-mm-dd',
            minView: 'month',
            weekStart: 0, //一周从哪一天开始
            todayBtn: 1, //底部会出现一个今天
            autoclose: true,//自动关闭
            todayHighlight: 1,//高亮今天日期
            startView: 2,//显示的视图
            forceParse: 1,//当选择器关闭的时候，是否强制解析输入框中的值
            showMeridian: 1
        });
        $('.form_datetime').on('changeDate', function (ev) {
        }).on('hide', function (event) {
            event.preventDefault();
            event.stopPropagation();
        });
    });
</script>
